<!DOCTYPE html>
<html lang="en">

	<head>
		<!--
      @author 金夏溢
      @Description: 出口和进口单位价值指数
    -->
		<meta charset="UTF-8">
		<title>出口和进口单位价值指数</title>
		<!-- 引入Jquery -->
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

		<!-- 引入BootStrap-table -->
		<link rel="stylesheet" href="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.css">
		<script src="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.js"></script>

		<!-- 引入Bootstrap-paginator -->
		<script src="../assets/libs/bootstrap-paginator-master/build/bootstrap-paginator.min.js"></script>

		<!-- 引入Echarts -->
		<script src="../assets/libs/echarts/echarts.min.js"></script>

		<style type="text/css">
			.th-inner {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div>
				<ul class="nav nav-tabs">
					<li role="presentation" id="tableTag">
						<a href="javascript:;" onclick="showTable()">&nbsp;<span class="glyphicon glyphicon-th-large"></span>&nbsp;</a>
					</li>
					<li role="presentation" id="imageTag">
						<a href="javascript:;" onclick="showImage()">&nbsp;<span class="glyphicon glyphicon-tasks"></span>&nbsp;</a>
					</li>
				</ul>
			</div>

			<div id="tableView">
				<div class="page-header" style="text-align: center;">
					<h3>出口和进口单位价值指数</h3>
					<br>
					<h4 style="margin-top: -20px;">Export and Import Unit Value Index</h4>
				</div>

				<table id="tableData" style="text-align: center;"></table>
			</div>

			<div id="imageView">
				<div class="page-header" style="text-align: center;visibility: hidden;" id="imageTitle">
					<h3>出口和进口单位价值指数柱状图</h3>
					<br>
					<h4 style="margin-top: -20px;">Export and Import Unit Value Index</h4>
				</div>

				<div class="panel" style="margin-top:1.5em">
					<div id="main" style="width: 100%;height:400px;"></div>
				</div>
			</div>

			<div style="color: #959595; margin-top: 1.5em;">*此数据仅展现最近五年，若需全部数据请点击&nbsp;
				<a href="#" class="btn btn-info btn-xs">
					<span class="glyphicon glyphicon-save"></span> 下载
				</a>
			</div>

			<!-- <div style="text-align: right;"><div id="page"></div></div> -->
		</div>
		<script>
			$(function() {
				$('#imageView').hide();
				$('#tableTag').attr('class', 'active');
			})

			function showTable() {
			    $('#tableView').show();
			    $('#imageView').hide();
			    $('#imageTitle').css('visibility','hidden');
			    $('#tableTag').attr('class', 'active');
			    $('#imageTag').removeClass('active');
			}

			function showImage() {
			    $('#imageView').show();
			    $('#imageTitle').css('visibility','visible');
			    $('#tableView').hide();
			    $('#imageTag').attr('class', 'active');
			    $('#tableTag').removeClass('active');
			}
			$('#tableData').bootstrapTable({
				striped: true,
				columns: [{
						field: 'country',
						title: '国家'
					},
					{
						field: 'year1',
						title: '2000年'
					},
					{
						field: 'year2',
						title: '2005年'
					},
					{
						field: 'year3',
						title: '2010年'
					},
					{
						field: 'year4',
						title: '2013年'
					},
					{
						field: 'year5',
						title: '2014年'
					},
					{
						field: 'year6',
						title: '2015年'
					},
				],
				data: [{
						country: '阿尔巴尼亚',
						year1: '62.7',
						year2: '70.5',
						year3: '79.1',
						year4: '85.1',
						year5: '85.3',
						year6: '84.4',
					},
					{
						country: '爱沙尼亚',
						year1: '27.9',
						year2: '62.4',
						year3: '58.2',
						year4: '/',
						year5: '/',
						year6: '/',
					},
					{
						country: '保加利亚',
						year1: '35.3',
						year2: '53.8',
						year3: '68.7',
						year4: '82.0',
						year5: '81.3',
						year6: '85.6',
					},
					{
						country: '波兰',
						year1: '40.4',
						year2: '43.3',
						year3: '54.2',
						year4: '59.1',
						year5: '61.6',
						year6: '64.5',
					},
					{
						country: '黑山',
						year1: '/',
						year2: '/',
						year3: '/',
						year4: '/',
						year5: '/',
						year6: '/',
					},
					{
						country: '捷克共和国',
						year1: '60.9',
						year2: '55.6',
						year3: '69.8',
						year4: '77.1',
						year5: '78.1',
						year6: '80.3',

					},
					{
						country: '克罗地亚',
						year1: '40.2',
						year2: '57.6',
						year3: '77.5',
						year4: '69.1',
						year5: '69.9',
						year6: '71.9',
					},
					{
						country: '拉托维亚',
						year1: '27.4',
						year2: '42.4',
						year3: '/',
						year4: '/',
						year5: '/',
						year6: '/',
					},
					{
						country: '立陶宛',
						year1: '22.6',
						year2: '40.9',
						year3: '/',
						year4: '/',
						year5: '/',
						year6: '/',
					},
					{
						country: '罗马尼亚',
						year1: '31.9',
						year2: '33.4',
						year3: '37.9',
						year4: '37.8',
						year5: '39.1',
						year6: '40.1',
					},
					{
						country: '马其顿',
						year1: '17.9',
						year2: '35.4',
						year3: '53.7',
						year4: '56.2',
						year5: '59.4',
						year6: '59.6',
					},
					{
						country: '塞尔维亚',
						year1: '15.7',
						year2: '26.2',
						year3: '44.3',
						year4: '44.2',
						year5: '47.7',
						year6: '50.3',
					},
					{
						country: '斯洛伐克',
						year1: '63.1',
						year2: '56.1',
						year3: '/',
						year4: '/',
						year5: '/',
						year6: '/',
					},
					{
						country: '斯洛文尼亚',
						year1: '/',
						year2: '/',
						year3: '/',
						year4: '/',
						year5: '/',
						year6: '/',
					},
					{
						country: '匈牙利',
						year1: '12.1',
						year2: '50.0',
						year3: '61.7',
						year4: '60.8',
						year5: '58.3',
						year6: '58.8',
					},
					{
						country: '波黑',
						year1: '78.9',
						year2: '48.4',
						year3: '33.8',
						year4: '60.1',
						year5: '63.2',
						year6: '12.0',
					}
				]
			});

			var all = {
				"data": [
					[62.7, 27.9, 35.3, 40.4, '/', 60.9, 40.2, 27.4, 22.6, 31.9, 17.9, 15.7, 63.1, '/', 12.1, 87.9],
					[70.5, 62.4, 53.8, 43.3, '/', 55.6, 57.6, 42.4, 40.9, 33.4, 35.4, 26.2, 56.1, '/', 50.0, 48.4],
					[79.1, 58.2, 68.8, 54.2, '/', 69.8, 77.5, '/', '/', 37.9, 53.7, 44.3, '/', '/', 61.7, 33.8],
					[85.1, '/', 82.0, 59.1, '/', 77.1, 69.1, '/', '/', 37.8, 56.2, 44.2, '/', '/', 60.8, 60.1],
					[85.3, '/', 81.3, 61.6, '/', 78.1, 69.9, '/', '/', 39.1, 59.4, 47.7, '/', '/', 58.3, 63.2],
					[84.4, '/', 85.6, 64.5, '/', 80.3, 71.9, '/', '/', 40.1, 59.6, 50.3, '/', '/', 58.8, 12.0]
				],
				"countrys": ["阿尔巴尼亚", "爱沙尼亚", "保加利亚", "波兰", "黑山", "捷克共和国", "克罗地亚", "拉脱维亚", "立陶宛", "罗马尼亚", "马其顿", "塞尔维亚", "斯洛伐克", "斯洛文尼亚", "匈牙利", "波黑"],
				"years": ["2000年", "2005年", "2010年", "2013年", "2014年", "2015年"]
			};

			var option = {
				timeline: {
					axisType: 'category',
					autoPlay: true,
					playInterval: 2000,
					data: all.years
				},
				options: [{
					tooltip: {
						trigger: 'axis'
					},
					title:{subtext:'数据来源'},
					calculable: true,
					grid: {
						top:50,
						bottom:100
					},
					xAxis: [{
						type: 'category',
						axisLabel: {
							interval: 0
						},
						data: all.countrys
					}],
					yAxis: [{
						type: 'value',
						name: ''
					}],
					series: [{
						name: '工业生产指数',
						type: 'bar',
						data: all.data[0]
					}]
				}, {
					series: [{
						data: all.data[1]
					}]
				}, {
					series: [{
						data: all.data[2]
					}]
				}, {
					series: [{
						data: all.data[3]
					}]
				}, {
					series: [{
						data: all.data[4]
					}]
				}, {
					series: [{
						data: all.data[5]
					}]
				}]
			};
			var myChart = echarts.init(document.getElementById('main'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>

</html>